<template>
	<div>
		<div class="bg-gradient-to-b from-cyan-200 to-white">
			<LandingContainer>
				<LandingHero />

			</LandingContainer>

		</div>
		<LandingContainer>
			<div class="my-24">
				<div class="text-center text-3xl font-bold mb-8">更多AI电商工具</div>
				<div class="grid md:grid-cols-4">
					<div v-for="(item, index) in section1" :key="index" class="my-4 cursor-pointer">
						<img class="mx-auto" :src="item.image" />

					</div>
				</div>
			</div>
			<div class="my-24">
				<div class="text-center text-3xl font-bold mb-8">3步完成电商出图</div>
				<div class="grid md:grid-cols-3">
					<div v-for="(item, index) in section2" :key="index" class="cursor-pointer">
						<img class="mx-auto rounded-lg" :src="item.image" />
						<div class="text-xl font-bold text-center my-4">{{ item.title }}</div>
						<div class="text-center my-4">{{ item.subtitle }}</div>


					</div>
				</div>
				<div class="flex justify-center mt-8">
					<landing-link icon="magic">免费使用</landing-link>

				</div>
			</div>
			<div class="my-24">
				<div class="text-center text-3xl font-bold mb-8">AI一键生成真实产品拍摄效果</div>

				<div class="grid md:grid-cols-2 place-items-center ">
					<div>
						<div v-for="(item, index) in section3" :key="index"
							class="flex items-center rounded-lg w-96 p-4  my-8 cursor-pointer hover:bg-blue-100"
							@mouseover="current = index">
							<span class="text-blue-500 text-2xl font-bold mr-8">·</span>
							<span class="text-xl hover:font-bold flex-1 ">{{ item.title }}</span>
							<i class="fa fa-arrow-right" v-show="current == index"></i>

						</div>
					</div>
					<img class="mx-auto rounded-lg" :src="section3[current].image" />
				</div>
				<div class="flex justify-center mt-8">
					<landing-link icon="magic">免费使用</landing-link>

				</div>
			</div>
			<div class="my-24">
				<div class="text-center text-3xl font-bold mb-8">AI场景图</div>
				<div class="grid md:grid-cols-4">
					<div v-for="(item, index) in section4" :key="index" class="w-72 h-72 my-4  cursor-pointer">
						<img class="rounded-lg" :src="item.image" />
					</div>
				</div>
				<div class="flex justify-center mt-8">
					<landing-link icon="magic">免费使用</landing-link>

				</div>
			</div>
			<div class="my-24">
				<div class="text-center text-3xl font-bold mb-8">AI主图</div>
				<div class="grid md:grid-cols-4">
					<div v-for="(item, index) in section5" :key="index" class="w-72 h-72 my-4 cursor-pointer">
						<img class="rounded-lg" :src="item.image" />


					</div>
				</div>
				<div class="flex justify-center mt-8 pb-8">
					<landing-link icon="magic">免费使用</landing-link>

				</div>
			</div>
		</LandingContainer>





	</div>
</template>
<script setup>

useSeoMeta({
	title: '明志智图-AI作图在线设计必备',
	ogTitle: '明志智图-AI作图在线设计必备',
	keywords:'明志智图,AI作图,在线设计,海报设计,设计素材,设计网站',
	description: '在线快速图片和视频编辑,不会PS也能搞定设计。海报、简历、PPT、公众号配图、电商等海量模板快速出图。三秒抠图实用便捷,抖音快手热门视频轻松搞定。海量正版授权资源,商用无忧。',
	ogDescription: '在线快速图片和视频编辑,不会PS也能搞定设计。海报、简历、PPT、公众号配图、电商等海量模板快速出图。三秒抠图实用便捷,抖音快手热门视频轻松搞定。海量正版授权资源,商用无忧。',
	ogImage: 'https://cdn.mzyun.tech/logo_black.png',
})
definePageMeta({ layout: 'landing' })

const router = useRouter()
const current = ref(0)

const section1 = ref([{
	image: "https://m1-cdn.imeijian.cn/d96778d54c044f3a112b9c1d1c67b8df.png?x-oss-process=image/resize,m_fill,w_262,h_153/format,webp",
	link: "",
}, {
	image: "https://m1-cdn.imeijian.cn/df3334cb44da84a1693a18926be3db13.png?x-oss-process=image/resize,m_fill,w_262,h_153/format,webp",
	link: "",
}, {
	image: "https://m1-cdn.imeijian.cn/1e7627cdc0db1999a75fff82d4b9f244.png?x-oss-process=image/resize,m_fill,w_262,h_153/format,webp",
	link: ""
}, {
	image: "https://m1-cdn.imeijian.cn/b35ad924070ac0f600ff1f0b8bd544ca.png?x-oss-process=image/resize,m_fill,w_262,h_153/format,webp",
	link: ""
}])

const section2 = ref([{
	image: "https://qhstaticssl.kujiale.com/image/jpeg/1715412030835/7CEE4603A011A967276DBE73BBEF4A4B.jpg?x-oss-process=image/resize,m_fill,w_200,h_200/format,webp",
	link: "",
	title: "第1步: 上传商品图",
	subtitle: '上传后可自动去除背景'
}, {
	image: "https://qhstaticssl.kujiale.com/image/jpeg/1715412031313/7E472A14CECB13B4962251348A3AD8E5.jpg?x-oss-process=image/resize,m_fill,w_200,h_200/format,webp",
	link: "",
	title: "第2步: 选择背景",
	subtitle: '选择与商品融合的背景'
}, {
	image: "https://qhstaticssl.kujiale.com/image/jpeg/1715412031134/4ACD2836287347E569AFD1AF726F7135.jpg?x-oss-process=image/resize,m_fill,w_200,h_200/format,webp",
	link: "",
	title: "第3步: 点击生成",
	subtitle: '选择电商模板一键生成商品图'
}])

const section3 = ref([{
	image: "https://m1-cdn.imeijian.cn/e29570de5cdc7e74134018c8bdb9d5ee.png?x-oss-process=image/resize,m_fill,w_640,h_444/format,webp",
	link: "",
	title: "不同场景风格任选",
	subtitle: '上传后可自动去除背景'
}, {
	image: "https://m1-cdn.imeijian.cn/ee2b1f67a168d3589720b86fa1fb9fbb.png?x-oss-process=image/resize,m_fill,w_640,h_444/format,webp",
	link: "",
	title: "上传任意图片生成",
	subtitle: '选择与商品融合的背景'
}, {
	image: "https://m1-cdn.imeijian.cn/9e92a2026a5d65a587d366d38588614f.png?x-oss-process=image/resize,m_fill,w_640,h_444/format,webp",
	link: "",
	title: "一键真实增强",
	subtitle: '选择电商模板一键生成商品图'
}])

const section4 = ref([{
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/4090808761070207693/2024/05/09/171524128291496518.png?x-oss-process=style/800wh_webp",
	link: "",
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/589488056905845283/2024/05/13/171558086400892329.png?x-oss-process=style/800wh_webp",
	link: "",
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/7593464079057174843/2024/05/13/171558132027347217.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/7293901926713739168/2024/05/13/171558104027717057.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/157901216541394061/2024/05/09/171523949786770002.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/3297275437032031748/2024/05/13/171558116987871039.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/1590961866132768571/2024/05/09/171523952704264828.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/3642590039223451778/2024/05/13/17155814094815328.png?x-oss-process=style/800wh_webp",
	link: ""
}])


const section5 = ref([{
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/8282138901498580311/2024/05/09/171522292982173259.png?x-oss-process=style/800wh_webp",
	link: "",
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/5689027107051621049/2024/05/13/171557080694433674.png?x-oss-process=style/800wh_webp",
	link: "",
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/2766295720615233647/2024/05/14/171566943054579270.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/8329708326728977231/2024/05/14/171565591734344483.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/3982609842332714298/2024/05/14/171566824438816053.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/47580672314131184/2024/05/11/171540869498116216.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/2917507979942446457/2024/05/14/171566934030873608.png?x-oss-process=style/800wh_webp",
	link: ""
}, {
	image: "https://graphic-design-cos.kujiale.com/meijian/qhgeom/prod/renderImage/7112564804502374078/2024/05/13/171559398448767336.png?x-oss-process=style/800wh_webp",
	link: ""
}])





</script>
<style></style>
